<template>
  <div class="container">
    <div class="top-title">
      <h3>评价订单</h3>
      <p><span>订单编号：</span>{{orderId}} <span>2020-05-16 15:06:20</span></p>
    </div>
    <div class="evaluate-page" v-for="item in order" :key="item.id">
      <div class="order-info">
        <div class="order-item">
          <img :src="item.picture" alt="">
          <p class="name ellipsis-2">{{item.name}}</p>
          <p class="desc ellipsis">{{item.attrsText}}</p>
          <p class="price">&yen;{{item.payPrice}}</p>
          <p class="count">{{item.count}}人评价</p>
        </div>
        <!-- <div class="order-dsc">
          <p><span>订单编号：</span>62205697599</p>
          <p><span>下单时间：</span>2020-05-16 15:06:20</p>
        </div> -->
      </div>
      <div class="publish">
        <dl class="form-item">
          <dt>商品评分：</dt>
          <dd>
            <EvaluateScore v-model="evaluates.score"></EvaluateScore>
          </dd>
        </dl>
        <dl class="form-item">
          <dt>印象标签：</dt>
          <dd>
            <EvaluateTag v-model="evaluates.tags"></EvaluateTag>
          </dd>
        </dl>
        <dl class="form-item">
          <dt>填写评价：</dt>
          <dd>
            <EvaluateText v-model="evaluates.content"></EvaluateText>
          </dd>
        </dl>
        <dl class="form-item">
          <dt>评价晒单：</dt>
          <dd>
            <div class="evaluate-upload">
              <div class="image" v-for="img in evaluates.pictures" :key="img">
                <img :src="img" alt="" />
                <span class="iconfont icon-guanbi" @click="deleteImg(img)"></span>
              </div>
              <div class="last">
                <div class="btn" v-show="showUpload">
                  <span class="iconfont icon-guanbi"></span>
                  <input type="file" accept="image/*" @change="getPicture($event)"/>
                </div>
                <div class="tip">
                  已上传<i>{{ evaluates.pictures.length }}</i>张，还能上传<i>{{ count - evaluates.pictures.length }}</i>张
                </div>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="form-footer">
      <xtx-button size="large" type="primary" @click="submit()">提交</xtx-button>
      <xtx-checkbox style="margin-left:20px" v-model="evaluates.anonymous">匿名评价</xtx-checkbox>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue'
import EvaluateScore from './components/evaluate-publish-score.vue'
import EvaluateTag from './components/evaluate-publish-tag.vue'
import EvaluateText from './components/evaluate-publish-text.vue'
import { useRoute } from 'vue-router'
import { findEvaluateByOrder, publishEvaluate } from '@/api/evaluate'
import Message from '@/components/library/message'
export default {
  name: 'EvaluateOrder',
  components: {
    EvaluateScore,
    EvaluateTag,
    EvaluateText
  },
  setup () {
    const evaluates = reactive({
      id: '', // 商品id
      skuId: '', // skuId
      score: 0, // 评分0-5
      tags: [], // 印象标签集合
      content: '', // 评价正文
      pictures: [], // 图片或视频链接集合
      anonymous: false // 是否匿名
    })
    const order = ref(null)
    const route = useRoute()
    const orderId = route.params.id
    // 获取待评价的订单信息
    findEvaluateByOrder(route.params.id).then(data => {
      order.value = data.result
    })
    // 对上传图片数量进行限制
    const showUpload = computed(() => {
      return evaluates.pictures.length <= 8
    })
    const count = ref(9)
    const getPicture = (e) => {
      // 预览图片
      const file = window.URL.createObjectURL(e.target.files[0])
      evaluates.pictures.push(file)
      console.log(evaluates.pictures)
      // 将图片文件转化为base64格式图片
      const reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = (e) => {
        // 使用axios的post方法上传到服务器
      }
    }
    // 删除上传的图片
    const deleteImg = (img) => {
      // 把当前img当做参数传入事件中，然后通过findIndex找到evaluate.images数组item和当前img匹配的元素，然后在数组中删除这条数据
      const index = evaluates.pictures.findIndex(item => item === img)
      evaluates.pictures.splice(index, 1)
    }
    // 提交评价信息
    const submit = () => {
      if (evaluates.score === 0 || evaluates.content === '') {
        Message({ type: 'warn', text: '为您购买的商品给予评分和评价内容' })
      } else {
        for (const key in evaluates) {
          if (key === 'id') {
            evaluates[key] = order.value[0].id
          }
          if (key === 'skuId') {
            evaluates[key] = order.value[0].skuId
          }
        }
        // 发送请求
        publishEvaluate(orderId, evaluates).then(data => {
          console.log(data.result)
        })
      }
    }
    return { evaluates, order, orderId, showUpload, count, getPicture, deleteImg, submit }
  }
}
</script>

<style lang="less" scoped>
.container {
  .top-title {
    padding: 20px 0;
    text-align: center;
    h3 {
      font-size: 18px;
    }
    p {
      padding: 5px 0;
      span {
        color: #999;
        margin-left: 20px;
      }
    }
  }
  .evaluate-page {
    height: 100%;
    background: #fff;
    display: flex;
    margin-bottom: 1px;
    .order-info {
      padding: 40px 60px;
      border-right: 1px solid #f5f5f5;
      .order-item {
        margin-bottom: 0;
        margin-right: 0;
        width: 216px;
        margin-right: 10px;
        // margin-bottom: 20px;
        padding: 0 0 30px 0;
        text-align: center;
        cursor: pointer;
        img {
          width: 150px;
          height: 150px;
        }
        .name {
          font-size: 16px;
          text-align: center;
          color: #5c5c5c;
          margin: 10px 0;
        }
        .price {
          font-size: 18px;
          color: #cf4444;
          padding: 10px 0;
        }
        .count {
          color: #999;
          padding-bottom: 10px;
        }
      }
      .order-dsc {
        border-top: 1px solid #f5f5f5;
        padding-top: 24px;
        line-height: 32px;
        p {
          span {
            color: #999;
          }
        }
      }
    }
    .publish {
      padding: 40px 20px;
      .form-item {
        display: flex;
        padding-bottom: 32px;
        line-height: 20px;
        dt {
          color: #999;
          width: 100px;
          text-align: right;
        }
        dd {
          flex: 1;
          padding-left: 10px;
          padding-right: 50px;
        }
      }
      .evaluate-upload {
        display: flex;
        flex-wrap: wrap;
        .image {
          width: 80px;
          height: 80px;
          margin-right: 12px;
          margin-bottom: 12px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .iconfont {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: #d8d8d8;
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 12px;
            display: none;
          }
          &:hover {
            .iconfont {
              display: block;
            }
          }
        }
      .last {
        display: flex;
        .btn {
          width: 80px;
          height: 80px;
          background-color: #d8d8d8;
          text-align: center;
          line-height: 80px;
          margin-right: 12px;
          position: relative;
          .iconfont {
            color: #fff;
            transform: rotate(45deg);
            display: inline-block;
            font-size: 36px;
          }
          input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            &:hover {
            cursor: pointer;
          }
          }
        }
          .tip {
            color: #999;
            height: 80px;
            display: flex;
            align-items: flex-end;
            line-height: 28px;
            i {
              color: @priceColor;
            }
          }
        }
      }
    }
  }
  .form-footer {
    background: #fff;
    padding: 30px 0;
    margin: 10px 0;
    text-align: center;
  }
}
</style>
